<template>
	<view style="padding-bottom: 200rpx;">
		<!-- <view class="img">
			<image class="image" :src="rq.imgUrl(detail.image)" mode="aspectFill"></image>
		</view> -->
		<swiper class="img swiper" indicator-active-color="#FFFFFF" circular autoplay="true" :indicator-dots="true">
			<swiper-item v-for="(item,index) in detail.image" :key="index">
				<image @click="previewImage(rq.imgUrl(item))" :src="rq.imgUrl(item)" mode="aspectFill"
					class="image syimg1"></image>
			</swiper-item>
		</swiper>
		<view class="header">
			<view class="title">
				<view class="title-text">
					<view class="status">
						<view class="status0" v-if="detail.activity_status == 1">
							筹备中
						</view>
						<view class="status1" v-if="detail.activity_status == 2">
							报名中
						</view>
						<view class="status2" v-if="detail.activity_status == 3">
							已结束
						</view>
					</view>
					{{detail.title}}
					<!-- #ifndef H5 -->
					<button open-type="share" class="share img-share" @click.stop="handleShare">
						<image src="https://pw.qyang.cc/static/svg/icon-share1.svg" mode=""></image>
					</button>
					<!-- #endif -->
				</view>
				<view class="title-img">
					<view class="con2">
						<view class="con2-wrapper">
							<view class="con2-img">
								<image class="joinAvatar" v-for="i,inx in detail.join_avatar" :key="inx"
									:src="rq.imgUrl(i)" mode="">
								</image>
								<view class="con2-text">
									<text style="margin-right: 20rpx;"
										v-if="detail.join_avatar&&detail.join_avatar.length==21">...</text>累计 <span
										style="color: #FF7883;">{{detail.join_num}}人</span> 报名
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="title">
				活动信息
			</view>
			<view class="content">
				<view class="c1">
					<view class="icon"> </view> 活动时间
				</view>
				<view class="c2">
					{{detail.issue}}
				</view>
				<view class="c1">
					<view class="icon"> </view>费用 <span
						style="color: #FF5866;">({{detail.is_collection==1?'平台代收':'现场收取'}})</span>
				</view>
				<view class="c2">
					<span style="color: #FF5866;">{{detail.price}}</span>
				</view>
				<view class="c1">
					<view class="icon"> </view>预计人数
				</view>
				<view class="c2">
					{{detail.sex}}
				</view>
				<view class="c1">
					<view class="icon"> </view>活动地点
				</view>
				<view class="c2">
					{{detail.address}}
				</view>
				<view class="c1">
					<view class="icon"> </view>发起人
				</view>
				<view class="c2">
					{{detail.username}}
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="title">
				活动详情
			</view>
			<view class="content">
				<view class="content_text">
					{{detail.details}}
				</view>
				<view class="list" v-for="item,index in pic" :key="index">
					<image class="image" :src="rq.imgUrl(item)" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="text" @click="shouCang">
				<image v-if="!isCang" src="https://pw.qyang.cc/static/svg/black-shoucang.svg" mode=""></image>
				<image v-else src="https://pw.qyang.cc/static/icon_cang1.png" mode=""></image>
				收藏
			</view>
			<view class="btn" @click="toPay()" :class="userId == detail.user_id?'disabled':''">立即报名</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				images: [],
				pic: [],
				isCang: false,
				userId:0
			};
		},
		onLoad(e) {
			this.id = e.id
			const userInfo = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')):null
			this.userId = userInfo.id?userInfo.id:0
			this.rq.getData('User_Activity/info', {
				id: e.id
			}).then(res => {
				if (res.data.join_avatar && res.data.join_avatar.length > 21) {
					res.data.join_avatar = res.data.join_avatar.slice(0, 22)
				}
				this.detail = res.data
				this.images = res.data.image
				this.pic = res.data.pic
				this.isCang = res.data.is_collect == 1 ? true : false
			})
		},
		onShareAppMessage() {
			return {
				title: '活动详情',
				path: '/subpages/activity/detail?id='+this.id,
			}
		},
		onShareTimeline() {
			return {
				title: '活动详情',
				path: '/subpages/activity/detail?id='+this.id,
			}
		},
		methods: {
			handleShare(item) {
				let _this = this
				//#ifdef APP
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    imageUrl:'https://pw.qyang.cc/static/basicprofile.png',
				    title: '活动详情',
				    miniProgram: {
				        id: 'gh_30c9bdca022b',
				        path: 'subpages/activity/detail?id='+_this.id,
				        type: _this.rq.isTest?2:0,
				        webUrl: 'https://pw.qyang.cc'
				    },
				    success: ret => {
				        console.log(JSON.stringify(ret));
				    },
					fail: (err) => {
						console.log(JSON.stringify(err));
					}
				});
				//#endif
			},
			previewImage(item) {
				var list = []
				for (var i = 0; i < this.detail.image.length; i++) {
					list.push(this.rq.imgUrl(this.detail.image[i]))
				}
				uni.previewImage({
					current: item, // 当前显示图片的http链接
					urls: list // 需要预览的图片http链接列表
				});

			},
			toPay() {
				if(this.userId == this.detail.user_id){
					return
				}
				if (this.detail.activity_status == 1) {
					uni.showToast({
						title: '活动尚未开始，暂不能报名~',
						icon: 'none',
						duration: 2000
					});
				} else if (this.detail.activity_status == 3) {
					uni.showToast({
						title: '活动已结束~',
						icon: 'none',
						duration: 2000
					});
				} else {
					if (this.detail.is_collection === 1) {
						let params = {
							id: this.id,
							price: this.detail.price.split('元')[0],
							title: this.detail.title
						}
						uni.navigateTo({
							url: '/subpages/activity/pay?params=' + encodeURIComponent(JSON.stringify(params))
						})
					} else {
						this.rq.getData('User_Activity/signup', {
							id: this.id
						}).then(res => {
							if (res.code == 1) {
								uni.navigateTo({
									url: '/subpages/activity/result'
								})
							}
						})
					}

				}

			},
			shouCang() {
				this.rq.getData('collect/set_upvote', {
					id: this.id,
					class: 'collect',
					type: 3
				}).then(res => {
					if (res.code == 1) {
						this.isCang = !this.isCang
						if (this.isCang == true) {
							uni.showToast({
								title: '收藏成功',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '取消收藏',
								icon: 'none',
								duration: 2000
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail {
		margin-top: 20rpx;
		background: #FFFFFF;
		padding: 20rpx;

		.title {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: normal;
			line-height: 16px;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 0.9);
			padding: 10rpx 20rpx;
		}

		.content {
			width: 100%;
			margin-top: 20rpx;

			.list {
				// margin: 0 20rpx;

				.image {
					width: 100%;
				}
			}
		}
	}

	.info {
		margin-top: 20rpx;
		background: #FFFFFF;
		padding: 20rpx;

		.title {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: normal;
			line-height: 16px;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 0.9);
			padding: 10rpx 20rpx;
		}

		.content {
			width: 92%;
			height: 20%;
			border-radius: 10px;
			opacity: 1;
			background: #FFF6F9;
			font-size: 13px;
			font-weight: normal;
			line-height: 13px;
			letter-spacing: 0px;
			color: #333333;
			margin: 20rpx;
			padding: 40rpx;
			font-weight: bold;

			.c1 {
				display: flex;
				align-items: center;

				.icon {
					width: 12rpx;
					height: 12rpx;
					background-color: black;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			.c2 {
				display: flex;
				align-items: center;
				line-height: 90rpx;
				padding-left: 22rpx;
			}
		}
	}

	.img {
		position: relative;
		z-index: 0;
		height: 500rpx;

		.image {
			width: 100%;
			height: 500rpx;
		}
	}

	.header {
		width: 100%;
		// height: 336rpx;
		border-radius: 16px 16px 0px 0px;
		opacity: 1;
		background: #FFFFFF;
		margin-top: -50rpx;
		z-index: 1;
		position: relative;

		.title {
			padding: 10rpx;
			position: relative;
			margin: 10rpx 0;
			// width: 96%;
			display: flex;
			align-items: center;
			flex-direction: column;

			.title-text {
				font-family: 阿里巴巴普惠体 2.0;
				width: 100%;
				font-size: 15px;
				font-weight: 600;
				line-height: 26px;
				letter-spacing: 0px;
				color: #333333;
				white-space: pre-wrap;
				padding: 10rpx 20rpx;
				position: relative;
				box-sizing: border-box;

				.img-share {
					position: absolute;
					right: 40rpx;
					width: 20px;
					height: 20px;
					bottom: 16rpx;

					image {
						width: 18px;
						height: 18px;
						display: block;
					}
				}

				.status {
					font-size: 13px;
					font-weight: 500;
					line-height: 12px;
					text-align: center;
					letter-spacing: 0px;
					color: #FFFFFF;
					display: inline-block;
					margin-right: 20rpx;
					// position: absolute;
					margin-top: 10rpx;

					.status0 {
						background: #84E28C;
						width: 54.64px;
						height: 40rpx;
						border-radius: 8px 0px 8px 0px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.status1 {
						background: #AE9CFE;
						width: 54.64px;
						height: 40rpx;
						border-radius: 8px 0px 8px 0px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.status2 {
						background: rgba(153, 153, 153, 0.1);
						color: #999999;
						width: 54.64px;
						height: 40rpx;
						border-radius: 8px 0px 8px 0px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.title-img {
				width: 100%;

				.con2 {
					font-family: 阿里巴巴普惠体 2.0;
					font-size: 13px;
					font-weight: normal;
					// line-height: 12px;
					letter-spacing: 0px;
					margin: 20rpx;
					color: #333333;
					display: flex;
					align-items: center;

					.con2-wrapper {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 3;
						display: -webkit-box;
						-webkit-box-orient: vertical;

						.con2-img {
							display: flex;
							flex-wrap: wrap;
							align-items: center;
						}

						.con2-img image {
							width: 68rpx;
							height: 68rpx;
							margin-bottom: 20rpx;
							margin-right: 19rpx;
							border-radius: 50%;
							display: inline-block;
						}

						.con2-text {
							font-family: PingFang SC;
							font-size: 28rpx;
							font-weight: normal;
							color: #000000;
							margin-left: 0;
							width: auto;
							display: inline-block;
						}
					}
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		display: flex;
		align-items: center;

		.text {
			margin: 0 40rpx;
			width: 10%;
			height: 88rpx;
			text-align: center;
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 10px;
			font-weight: normal;
			line-height: 18px;
			letter-spacing: 0px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #666666;

			image {
				width: 21px;
				height: 21px;
			}
		}

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 20rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
			width: 70%;
			
			&.disabled{
				background: #DDDDDD;
				border: 1px solid #DDDDDD;
			}
		}
	}
</style>